<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>云链AI文档 - 文档上传</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Inter', sans-serif;
    }
    .hover-scale {
      transition: transform 0.2s;
    }
    .hover-scale:hover {
      transform: scale(1.02);
    }
    @keyframes slideIn {
      from {
        transform: translateY(100%);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }
    @keyframes slideOut {
      from {
        transform: translateY(0);
        opacity: 1;
      }
      to {
        transform: translateY(100%);
        opacity: 0;
      }
    }
    .toast-enter {
      animation: slideIn 0.3s ease-out forwards;
    }
    .toast-exit {
      animation: slideOut 0.3s ease-in forwards;
    }
  </style>
</head>
<body class="bg-gray-50 font-sans text-gray-700">

  <!-- 页面容器 -->
  <div class="flex h-screen">
    
    <!-- 左侧导航栏 -->
    <aside class="w-64 bg-white shadow-lg flex flex-col justify-between p-6 border-r border-gray-100">
      <div>
        <h1 class="text-2xl font-bold text-purple-600 mb-8 flex items-center">
          <span class="mr-2">📘</span> 云链AI文档
        </h1>
        <ul class="space-y-4 text-sm">
          <li>
            <a href="/upload.html" class="flex items-center p-3 rounded-lg bg-purple-50 text-purple-600 font-medium">
              <span class="mr-3">🏠</span> 首页
            </a>
          </li>
          <li>
            <a href="/summary.html" class="flex items-center p-3 rounded-lg hover:bg-purple-50 hover:text-purple-600 transition-colors">
              <span class="mr-3">🤖</span> AI摘要
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center p-3 rounded-lg hover:bg-purple-50 hover:text-purple-600 transition-colors">
              <span class="mr-3">📖</span> 阅读记录
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center p-3 rounded-lg hover:bg-purple-50 hover:text-purple-600 transition-colors">
              <span class="mr-3">📋</span> 笔记管理
            </a>
          </li>
          <li>
            <a href="/space.html" class="flex items-center p-3 rounded-lg hover:bg-purple-50 hover:text-purple-600 transition-colors">
              <span class="mr-3">📂</span> 文档空间
            </a>
          </li>
        </ul>
      </div>
    </aside>

    <!-- 主内容区 -->
    <main class="flex-1 p-8 relative bg-gray-50">
      <div class="max-w-7xl mx-auto">
        <!-- 顶部导航 -->
        <div class="flex justify-end items-center mb-8">
          <button class="text-sm text-gray-600 hover:text-purple-600 transition-colors">📄 上传记录</button>
        </div>

        <!-- 上传区域 -->
        <section class="text-center">
          <h2 class="text-3xl font-bold text-gray-800 mb-4">
            太多、太长、读不懂，<span class="text-purple-600">上传</span>轻松读
          </h2>
          <p class="text-gray-500 mb-8">支持 PDF、Word、TXT 等格式，最大支持 100MB</p>

          <!-- 拖拽上传区域 -->
          <form id="uploadForm" class="border-dashed border-2 border-gray-300 rounded-xl bg-white p-12 max-w-3xl mx-auto hover-scale transition-all hover:border-purple-500 hover:shadow-lg">
            <input type="file" id="fileInput" class="hidden" multiple />
            <div class="text-gray-400 mb-4 text-4xl">⬆</div>
            <p class="text-purple-600 font-medium text-lg cursor-pointer mb-2" onclick="document.getElementById('fileInput').click()">点击上传</p>
            <p class="text-sm text-gray-400">或直接拖拽进来</p>
          </form>

          <!-- 操作功能 -->
          <div class="mt-8 flex justify-center gap-4">
            <div class="relative flex-1 max-w-xl">
              <input type="text" placeholder="粘贴链接，解析网页中的文本、视频、PDF（支持arxiv）"
                class="w-full border rounded-lg pl-4 pr-12 py-2.5 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all shadow-sm" />
              <button class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-purple-500">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
                </svg>
              </button>
            </div>
            <button class="bg-purple-600 text-white px-6 py-2.5 rounded-lg hover:bg-purple-700 transition-colors shadow-sm hover:shadow-md">
              开始阅读
            </button>
            <button class="border border-gray-200 px-6 py-2.5 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors shadow-sm hover:shadow-md">
              上传多个项目同时阅读
            </button>
          </div>
        </section>
      </div>
    </main>
  </div>

  <script>
    // 创建toast通知系统
    const createToast = (message, type = 'success') => {
      const toast = document.createElement('div');
      toast.className = `fixed bottom-4 right-4 ${type === 'success' ? 'bg-green-50 text-green-600' : 'bg-red-50 text-red-600'} rounded-lg p-4 shadow-lg flex items-center space-x-2 toast-enter`;
      
      const icon = document.createElement('span');
      icon.className = 'text-xl';
      icon.textContent = type === 'success' ? '✅' : '❌';
      
      const text = document.createElement('span');
      text.className = 'font-medium';
      text.textContent = message;
      
      toast.appendChild(icon);
      toast.appendChild(text);
      document.body.appendChild(toast);

      // 3秒后消失
      setTimeout(() => {
        toast.classList.remove('toast-enter');
        toast.classList.add('toast-exit');
        setTimeout(() => {
          document.body.removeChild(toast);
        }, 300);
      }, 3000);
    };

    const uploadForm = document.getElementById('uploadForm');
    const fileInput = document.getElementById('fileInput');

    // 处理拖拽上传
    uploadForm.addEventListener('dragover', (e) => {
      e.preventDefault();
      uploadForm.classList.add('border-purple-500', 'shadow-lg');
    });

    uploadForm.addEventListener('dragleave', () => {
      uploadForm.classList.remove('border-purple-500', 'shadow-lg');
    });

    uploadForm.addEventListener('drop', (e) => {
      e.preventDefault();
      uploadForm.classList.remove('border-purple-500', 'shadow-lg');
      const files = e.dataTransfer.files;
      handleFiles(files);
    });

    // 处理点击上传
    fileInput.addEventListener('change', (e) => {
      handleFiles(e.target.files);
    });

    // 处理文件上传
    async function handleFiles(files) {
      for (const file of files) {
        const formData = new FormData();
        formData.append('file', file);

        try {
          const response = await fetch('/api/upload', {
            method: 'POST',
            body: formData
          });

          const result = await response.json();
          
          if (result.success) {
            createToast(`文件 "${file.name}" 上传成功！`, 'success');
            // 可以在这里添加跳转到文档空间的代码
            // window.location.href = '/space.html';
          } else {
            createToast(`上传失败: ${result.message}`, 'error');
          }
        } catch (error) {
          createToast(`上传出错: ${error.message}`, 'error');
        }
      }
    }
  </script>

</body>
</html>
